<template>
  <view class="quest" v-if="categoryList.jm">
    <view class="quest-title">
      <view class="quest-title-top">
        <img src="@/static/images/redbag.png" alt="" style="height: 30rpx; margin-right: 20rpx" />
        <text>{{ categoryList.jm.title }}</text>
      </view>
      <view class="quest-title-bottom">
        <view class=""
          >招募人数：<text style="color: #000">{{ categoryList.jm.receiveMax }}人</text>
        </view>
        <view class="" style="color: red; font-weight: bold; font-size: 30rpx"
          >￥<text style="fontsize: 36rpx">{{ categoryList.jm.price.toFixed(2) }}</text></view
        >
      </view>
    </view>
    <view class="quest-id">
      <text
        >任务编号：<text style="color: #000">{{ categoryList.jm.id }}</text></text
      >
      <img
        src="@/static/images/copy.png"
        alt=""
        @click="copy('任务编号：' + categoryList.jm.id)"
        style="height: 40rpx"
      />
    </view>
    <view class="quest-demand">
      <text class="after">任务要求</text>
      <view
        >生效时间：<text style="color: #000">{{ categoryList.jm.startDate }}</text></view
      >
      <view
        >结束时间：<text style="color: #000">{{ categoryList.jm.endDate }}</text></view
      >
    </view>

    <view class="quest-description">
      <text class="after">任务描述</text>
      <view v-html="categoryList.jm.content"></view>
    </view>
    <view class="signup">
      <img src="@/static/images/wechat.png" alt="" @click="gokefu"/>
      <button @click="signup" v-if="categoryList.job.status == 0">我要报名</button>
      <button @click="goorder" v-else style="background-color: #1e9fff">查看订单</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { jobget, jobjoin, jobstatus } from '@/services/home'
import { ref } from 'vue'
import { onLoad,onUnload } from '@dcloudio/uni-app'
import { gokefu } from '@/utils/index';
const categoryList = ref<any>({})
const getHomeCategoryData = async () => {
  const currentPage = getCurrentPages().pop()
  const id = currentPage?.$page.options.id
  const res = await jobget({ id: id })
  if (res.success) {
    categoryList.value = res.data
  }
}
const copy = async (id: any) => {
  try {
    await navigator.clipboard.writeText(id)
    uni.showToast({ title: '复制成功！' })
  } catch (err) {
    uni.showToast({ title: '复制失败：' + err })
  }
}

let timer: number | null = null // 将 timer 声明在函数外部，以便控制

const seestatus = async () => {
  const result = await jobstatus({ id: categoryList.value.jm.id })

  if (result.data.queStatus == 20) {
    uni.hideLoading()
    uni.showToast({
      title: result.data.queMessage,
      icon: 'none',
    })

    // 如果定时器已存在，清除它
    if (timer) {
      clearInterval(timer)
      timer = null // 重置 timer
    }

    setTimeout(async () => {
      await getHomeCategoryData()
      uni.navigateTo({
        url: '/pagesMember/order-detail/quest?id=' + categoryList.value.job.id,
      })
    }, 1000)
  } else if(result.data.queStatus == 99){
    if (timer) {
      clearInterval(timer)
      timer = null // 重置 timer
    }
    uni.showToast({
      title: result.data.queMessage,
      icon: 'none',
    })
  } else {
    // 如果定时器不存在，启动它
    if (!timer) {
      timer = setInterval(async () => {
        await seestatus()
      }, 3000)
    }
  }
}
const signup = async () => {
  uni.showModal({
    title: '提示',
    content: '确定要报名此任务？',
    success: async function (result) {
      if (result.confirm) {
        uni.showLoading({
          title: '报名中...',
          mask: true,
        })
        const res = await jobjoin({ id: categoryList.value.jm.id })
        if (res.success) {
          uni.hideLoading()
          uni.showLoading({
            title: '排队中，请稍等...',
            mask: true,
          })
          seestatus()
        } else {
          uni.hideLoading()
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      }
    },
  })
}
const goorder = () => {
  uni.navigateTo({
    url: '/pagesMember/order-detail/quest?id=' + categoryList.value.job.id,
  })
}
onLoad(async () => {
  uni.showLoading({
    title: '加载中...',
    mask: true,
  })
  await getHomeCategoryData()
  uni.hideLoading()
})
onUnload(()=>{
  if (timer) {
    clearInterval(timer)
    timer = null // 重置 timer
  }
})
</script>

<style lang="scss">
.signup {
  position: fixed;
  width: 100vw;
  height: 80rpx;
  bottom: 0;
  right: 0;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 40rpx;

  img {
    height: 80rpx;
  }

  button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    width: 80%;
    color: #fff;
    background-color: #ff1e3e;
    font-size: 26rpx;
  }
}

.button {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90rpx;
  height: 38rpx;
  font-size: 20rpx;
  line-height: 40rpx;
  color: #fff;
  background-color: #1e9fff;
  white-space: nowrap;
}

.quest {
  min-height: 90vh;
  padding: 20rpx;
  padding-bottom: 100rpx;
  background-color: #f7f7f7;
  font-size: 24rpx;
  color: #999;

  .quest-title {
    background-color: #fff;
    padding: 40rpx;
    border-radius: 10rpx;

    .quest-title-top {
      color: #000;
      font-size: 26rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    .quest-title-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }

  .quest-id {
    background-color: #fff;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .quest-demand,
  .quest-description {
    background-color: #fff;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;
    img{
      max-width: 100%;
    }
    .after {
      font-size: 28rpx;
      color: #000;
      position: relative;
      padding-left: 20rpx;
    }

    .after::after {
      content: '';
      position: absolute;
      left: 0rpx;
      top: 20%;
      height: 60%;
      border: 1px solid #00bb99;
    }

    view {
      margin-top: 30rpx;
    }
  }
}
</style>
